<template>
    <view class="qu-append">
        <view class="header flex align-center justify-between margin-lr padding-tb-sm">
            <view class="text-xxl"><text class="cuIcon-close" @click="cancel"></text></view>
            <button class='cu-btn bg-green shadow' :disabled="!inputValue" @click="send">发送</button>
        </view>
        <view class="body">
            <view class="cu-form-group margin">
                <textarea v-model="inputValue" maxlength="-1" placeholder="在这里追问哦～" :focus="focus" />
                </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        focus: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            inputValue: '',
        };
    },
    methods: {
        cancel: function() {
            this.$emit('close');
        },
        send: function() {
            if (this.inputValue) {
                this.$emit('append-qu', this.inputValue);
            }
            this.inputValue = '';
        }
    }
};
</script>

<style lang="scss" scoped>
    $input-height: 8em;
    .qu-append {
        height: 85vh;
        background-color: #fff;
        .header{
            border-bottom: solid 1px #eaeaea;
        }
    }

    .body .cu-form-group{
        background-color: rgb(240, 240, 240);

        textarea{
            height: $input-height;
        }
    }
</style>
